const getModule = () => {
  return {
    module: [],
    /** 菜单拖拽配置 **/
    attrGroups: {
      group: { name: 'people', pull: 'clone', put: false },
      animation: 50,
      sort: false,
      forceFallback: true
    },
    /** iPhone内拖拽配置 **/
    viewGroups: {
      group: {
        name: 'people'
      },
      animation: 50,
      forceFallback: true,
      fallbackClass: 'my-handle',
      easing: 'cubic-bezier(1, 0, 0, 1)',
      ghostClass: 'sortable-drag',
      chosenClass: 'draggingStyle',
      dragClass: 'sortable-drag',
      filter: '.editTools,.null_group,.not_cover,.kf_group,.ad_button_position'
    },
    // /** 组件属性 **/
    // viewAttr: {},
    /** 菜单列表 **/
    menuData: [
      {
        id: 0, title: '图片', type: 'image'
      },
      {
        id: 1, title: '表单', type: 'form'
      },
      {
        id: 2, title: '按钮', type: 'button'
      },
      {
        id: 3, title: '滚动新闻', type: 'news'
      },
      {
        id: 5, title: '在线咨询', type: 'kf'
      }
    ],
    /** 组件 **/
    contentData: [
      {
        topType: 'image', type: 'img', title: '单图',
        img: [
          { src: 'imgAdd', topType: 'image', type: 'img', attr: { width: '100', height: '210', base64Src: '', hrefUrl: '' }}
        ]
      },
      {
        topType: 'image', type: 'swipe', title: '组图',
        img: [
          { src: 'swipe', topType: 'image', type: 'swipe', attr: { width: '100', height: 200, autoplay: true, loop: true, indicator: '—', base64Src: [{ src: '', href: '' }, { src: '', href: '' }], hrefUrl: '' }},
          { src: 'swipe_3', topType: 'image', type: 'swipe_card', attr: { width: '100', height: 200, autoplay: true, loop: true, indicator: '—', base64Src: [{ src: '', href: '' }, { src: '', href: '' }], hrefUrl: '' }}
        ]
      },
      {
        topType: 'form', type: 'form', title: '基础样式',
        img: [
          {
            src: 'from', topType: 'form', type: 'form', attr: {
              background: 'rgba(255, 255, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              button_border_width: '1',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              button_width: '100',
              button_border_radius: '0',
              button_text: '立即提交',
              button_height: '40',
              hrefUrl: '',
              formList: [
                { title: '姓名', prop: 'name', required: true, value: '', type: 'input', rules: { required: true, message: '请输入', trigger: 'blur' }},
                { title: '电话', prop: 'iphone', required: true, value: '', type: 'input', rules: { required: true, message: '请输入', trigger: 'blur' }}
              ],
              rules: {
                name: [
                  { required: true, message: '请输入', trigger: 'blur' }
                ],
                iphone: [
                  { required: true, message: '请输入', trigger: 'blur' }
                ]
              }
            }
          }
        ]
      },
      {
        topType: 'button', type: 'button', title: '基础样式',
        img: [
          {
            src: 'button', topType: 'button', type: 'button',
            attr: {
              button_text: '按钮',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '40',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(64, 158, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: ''
            }
          },
          {
            src: 'button_2', topType: 'button', type: 'button_2',
            attr: {
              button_text: '按钮',
              button_border_width: '1',
              button_border_radius: '4',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(64, 158, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: ''
            }
          },
          { src: 'button_3', topType: 'button', type: 'button_3',
            attr: {
              hrefUrl: '',
              height: '210',
              width: '100'
            }
          }]
      },
      {
        topType: 'button', type: 'buttonTop', title: '顶部悬浮',
        img: [
          { src: 'button', seat: 'top', topType: 'button', type: 'button',
            attr: {
              button_text: '按钮',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '40',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(64, 158, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }
          },
          { src: 'button_2', seat: 'top', topType: 'button', type: 'button_2',
            attr: {
              button_text: '按钮',
              button_border_width: '1',
              button_border_radius: '4',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(64, 158, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }},
          { src: 'button_3', seat: 'top', topType: 'button', type: 'button_3',
            attr: {
              hrefUrl: '',
              height: '210',
              width: '100',
              position: '0'
            }}]
      },
      {
        topType: 'button', type: 'buttonButton', title: '底部悬浮',
        img: [
          { src: 'button', seat: 'bottom', topType: 'button', type: 'button',
            attr: {
              button_text: '按钮',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '40',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(64, 158, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }},
          { src: 'button_2', seat: 'bottom', topType: 'button', type: 'button_2',
            attr: {
              button_text: '按钮',
              button_border_width: '1',
              button_border_radius: '4',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(64, 158, 255, 1)',
              button_background: 'rgba(64, 158, 255, 1)',
              button_border_background: 'rgba(64, 158, 255, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }},
          { src: 'button_3', seat: 'bottom', topType: 'button', type: 'button_3',
            attr: {
              hrefUrl: '',
              height: '210',
              width: '100',
              position: '0'
            }}]
      },
      {
        topType: 'news', type: 'news', title: '基本样式',
        img: [
          { src: 'news', type: 'news' }
        ]
      },
      {
        topType: 'kf', type: 'kfTop', title: '顶部悬浮',
        img: [
          { topType: 'kf', src: 'kf', type: 'kf', seat: 'top',
            attr: {
              button_text: '在线咨询',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(255, 255, 255, 1)',
              button_background: 'rgba(255, 255, 255, 1)',
              button_border_background: 'rgba(32, 30, 30, 1)',
              font_size_button: '14',
              color_button: 'rgba(32, 30, 30, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }},
          { topType: 'kf', src: 'kf_1', type: 'kf_1', seat: 'top',
            attr: {
              button_text: '在线咨询',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(32, 30, 30, 1)',
              button_background: 'rgba(32, 30, 30, 1)',
              button_border_background: 'rgba(32, 30, 30, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }}
        ]
      },
      {
        topType: 'kf', type: 'kfButton', title: '底部悬浮',
        img: [
          { topType: 'kf', src: 'kf', type: 'kf', seat: 'bottom',
            attr: {
              button_text: '在线咨询',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(255, 255, 255, 1)',
              button_background: 'rgba(255, 255, 255, 1)',
              button_border_background: 'rgba(32, 30, 30, 1)',
              font_size_button: '14',
              color_button: 'rgba(32, 30, 30, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }},
          { topType: 'kf', src: 'kf_1', type: 'kf_1', seat: 'bottom',
            attr: {
              button_text: '在线咨询',
              button_border_width: '1',
              button_border_radius: '20',
              button_width: '90',
              button_height: '40',
              background_image: '',
              button_color: 'rgba(32, 30, 30, 1)',
              button_background: 'rgba(32, 30, 30, 1)',
              button_border_background: 'rgba(32, 30, 30, 1)',
              font_size_button: '14',
              color_button: 'rgba(255, 255, 255, 1)',
              font_weight_button: 'normal',
              letter_spacing_button: '1',
              hrefUrl: '',
              position: '0'
            }},
          { topType: 'kf', src: 'kf_2', type: 'kf_2', seat: 'bottom',
            attr: {
              background: 'rgba(32, 30, 30, 1)',
              kf_text: '客服01号为您服务',
              button_text: '在线咨询',
              kf_tip_title: '客服01号为您服务',
              kf_tip_content: '你好，客服01号已等候您多时，请问有什么可以帮助你的？',
              kf_tip_title_color: 'rgba(0, 0, 0, 1)',
              kf_tip_content_color: 'rgba(0, 0, 0, 1)',
              kf_text_color: 'rgba(255, 255, 255, 1)',
              button_text_color: 'rgba(255, 255, 255, 1)',
              message_sum: true,
              animation: true,
              message_tip: true,
              button_background: 'rgba(248, 89, 89, 1)',
              button_border_background: 'rgba(248, 89, 89, 1)',
              button_width: '75',
              button_height: '25',
              button_border_width: '1',
              button_border_radius: '40',
              hrefUrl: ''
            }}
        ]
      },
      {
        topType: 'kf', type: 'kfRight', title: '右部悬浮',
        img: [
          { topType: 'kf', src: 'kf_3', type: 'kf_3', seat: 'right',
            attr: {
              button_text: '在线咨询',
              message_sum: true,
              animation: true,
              message_tip: true,
              kf_tip_title: '客服01号为您服务',
              kf_tip_content: '你好，客服01号已等候您多时，请问有什么可以帮助你的？',
              kf_tip_title_color: 'rgba(0, 0, 0, 1)',
              kf_tip_content_color: 'rgba(0, 0, 0, 1)',
              hrefUrl: '',
              button_color: 'rgba(248, 89, 89, 1)',
              button_background: 'rgba(248, 89, 89, 1)',
              button_border_background: 'rgba(248, 89, 89, 1)',
              button_border_radius: '50',
              button_font_size: '12',
              button_border_width: '1'
            }},
          { topType: 'kf', src: 'kf_4', type: 'kf_4', seat: 'right',
            attr: {
              background: 'rgba(255, 255, 255, 0)',
              button_text_1: '免费体检',
              button_text_2: '客服在线',
              button_text_3: '了解详情',
              message_sum: true,
              animation: true,
              message_tip: true,
              button_item_num: '1',
              kf_tip_title: '客服01号为您服务',
              kf_tip_content: '你好，客服01号已等候您多时，请问有什么可以帮助你的？',
              kf_tip_title_color: 'rgba(0, 0, 0, 1)',
              kf_tip_content_color: 'rgba(0, 0, 0, 1)',
              hrefUrl: '',
              button_color: 'rgba(255, 255, 255, 1)',
              button_background: 'rgba(248, 89, 89, 1)',
              button_border_background: 'rgba(248, 89, 89, 1)',
              button_border_radius: '3',
              button_font_size: '12',
              button_border_width: '1',
              width: '75',
              height: '30'
            }}
        ]
      }
    ],
    /** 组件属性 **/
    attr: {
      img: { width: 1, height: 1, base64Src: '', hrefUrl: '' },
      swipe: { width: 1, height: 1, base64Src: '', hrefUrl: '' }
    },
    /** 图库链接 **/
    imgGroup: [
      'https://s1.ax1x.com/2020/07/16/UBviKH.jpg',
      'https://s1.ax1x.com/2020/07/16/UBv8Zn.jpg',
      'https://s1.ax1x.com/2020/07/16/UBv1qs.jpg',
      'https://s1.ax1x.com/2020/07/16/UBvlrj.jpg',
      'https://s1.ax1x.com/2020/07/16/UBvmPf.png',
      'https://s1.ax1x.com/2020/07/16/UBvZIP.png',
      'https://s1.ax1x.com/2020/07/16/UBvVat.jpg',
      'https://s1.ax1x.com/2020/07/16/UBvEVI.jpg',
      'https://s1.ax1x.com/2020/07/16/UBvkqA.jpg'
    ],
    /** 组件合集(渲染菜单) **/
    attrGroup: [],
    /** iphone里渲染的数组 **/
    viewData: [],
    /** iphone里选中的下标 **/
    iphoneIndex: ''
  }
}
const state = getModule()

const mutations = {
  SET_MODULE: (state, module) => {
    state.module = module
  },
  SET_CONTENT_DATA: (state, data) => {
    state.contentData = data
  },
  SET_MENU_DATA: (state, data) => {
    state.menuData = data
  },
  SET_ATTR_GROUP: (state, data) => {
    state.attrGroup = data
  },
  SET_VIEW_DATA: (state, data) => {
    state.viewData = data
  },
  SET_IPHONE_INDEX: (state, data) => {
    state.iphoneIndex = data
  }
}

const actions = {
  /** 更新当前点击的下标 **/
  uploadIndex({ commit }, index) {
    commit('SET_IPHONE_INDEX', index)
  },
  /** 修改组件总列表 (还没用到) **/
  moduleList({ commit }, roles) {
    return new Promise((resolve, reject) => {
      commit('SET_MODULE', roles)
      resolve()
    })
  },
  /** 清空组件总列表 **/
  clearAttr({ commit }) {
    return new Promise((resolve, reject) => {
      commit('SET_VIEW_DATA', [])
      resolve()
    })
  },
  /** 规格化组件列表 **/
  countAttr({ commit }) {
    const menuData = state.menuData
    const contentData = state.contentData
    return new Promise((resolve) => {
      menuData.filter(menuItem => {
        const param = []
        contentData.find(contentItem => {
          if (menuItem.type === contentItem.topType) {
            param.push(contentItem)
            menuItem['content'] = param
          }
        })
      })
      commit('SET_ATTR_GROUP', menuData)
      console.log(state.attrGroup)
      resolve()
    })
  },
  /** 更新IPHONE的数组渲染 **/
  updateIphone({ commit }, param) {
    commit('SET_VIEW_DATA', param)
  },
  /** 跳转到H5页面 **/
  h5Tools({ commit }, router) {
    router.push({ path: '/' })
  }
}

export default {
  state,
  mutations,
  actions
}
